<template>
  <div class="layout-demo">
    <a-layout>
      <a-layout-header style="height: 55px; background-color:skyblue;" class="fixed-top">
        <div class="flex justify-between align-center"
             style="display: flex; justify-content: space-between; align-items: center;">
          <div style="flex: 1;">
            <h3 style="margin: 0;">公务用车系统后台</h3>
          </div>
          <div class="flex align-center no-drag"
               style="display: flex; align-items: center;margin-right: 50px;padding: 10px">
            <a-trigger >
              <div
                   style="display: flex; align-items: center;">
                <div style="margin-right: 10px;">
                  {{ userInfo.usernameWbxqy }}
                </div>
                <div>
                  <a-avatar shape="square" :size="32">
                    <img alt="avatar" :src="userInfo.avatarUrlWbxqy"/>
                  </a-avatar>
                </div>
              </div>
              <template #content>
                <a-list title="操作列表">
                    <a-list-item>
                      <a-button status="danger" @click="loginOut">退出登录</a-button>
                    </a-list-item>
                </a-list>
              </template>
            </a-trigger>
          </div>
        </div>
      </a-layout-header>
      <a-layout style="height: 68vh">
        <a-layout-sider style="width: 240px;" class="fixed-left">
          <!-- 左侧导航 -->
          <left_nav></left_nav>
        </a-layout-sider>
        <a-layout-content>
          <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getUserInfo} from "@/api/userMG";
import router from "@/router";

const userInfo = ref("")
onMounted(async () => {
  userInfo.value = await getUserInfo()
});
// 退出登录
const loginOut = ()=>{
  localStorage.clear()
  router.push("/")
}
</script>

<script>
import left_nav from "../components/left_nav.vue";

export default {
  components: {
    left_nav
  }
};
</script>

<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}


.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  background-color: #121212;
}


.layout-demo :deep(.arco-layout-content) {
  /*background-color: rgb(var(--arcoblue-6));*/
}
</style>